<template>
  <div class="app-container">
    <el-drawer :title="title" :visible.sync="openDetail" size="920px" @close="cancel">
      <template v-slot:title>
        <span class="titleDiv">{{ title }}</span>
      </template>
      <!-- :span-method="objectSpanMethod" -->
      <div style="padding: 0 20px">
        <div>
          <el-button type="primary" v-print="printContent">打印</el-button>
        </div>
        <div id="printMe">
          <div v-for="(item,i) in ticketData" :key="i" style="page-break-after:always ;width:853px;height:495px">
            <div style="text-align: center;">
              <span>生产领料单</span>
            </div>
            <div style="text-align: right;margin-right: 50px;font-size: 13px;">
              <span>武汉合智数字能源技术有限公司</span>
            </div>
            <div style="text-align: right;margin-right: 50px;font-size: 13px;">
              <span>编号：SOUT00006427</span>
            </div>
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <span class="fontsize">领料类型：</span>
                  <span></span>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <span class="fontsize">任务批号：</span>
                  <span></span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <span class="fontsize">领料部门：</span>
                  <span></span>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <span class="fontsize">日期：</span>
                  <span></span>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <span class="fontsize">领料用途：</span>
                  <span></span>
                </div>
              </el-col>
            </el-row>
            <div class="printDiv">
              <el-table v-loading="loading" border :data="item" resizable style="width: 100%; font-family: Microsoft YaHei; color: #000; " fit :header-cell-style="{fontSize:'12px',color: '#000',fontWeight: '500',height:'40px',padding:'0px'}" :cell-style="{fontSize:'12px',padding:'0px',height:'40px',lineHeight:'20px',color: '#000'}" class="exporttable">
                <el-table-column label="序号" align="center" width="50px" prop="issueCode">
                  <template slot-scope="scope">
                    <span>{{scope.$index + 1}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="物料编码" align="center" width="84px" prop="itemCode" />
                <!-- <el-table-column label="旧物料编码" align="center" width="80px" prop="b" /> -->
                <el-table-column label="物料名称" align="center" width="110px" prop="itemName">
                  <template slot-scope="scope">
                    <div style="line-height: 13px;text-align:left; padding:0px">{{scope.row.itemName}}</div>
                  </template>
                </el-table-column>
                <el-table-column label="规格型号" align="center" width="203px" prop="specification">
                  <template slot-scope="scope">
                    <div style="line-height: 13px;text-align:left;">{{scope.row.specification}}</div>
                  </template>
                </el-table-column>
                <el-table-column label="单位" align="center" width="40px" prop="unitOfMeasure" />
                <el-table-column label="应发数量" align="center" width="60px" prop="payableQty" />
                <el-table-column label="实发数量" align="center" width="60px" prop="quantityIssued" />
                <el-table-column label="仓库" width="70px" align="center" prop="warehouseName" />
                <el-table-column label="库位" width="60px" align="center" prop="areaName" />
                <el-table-column label="批号" align="center" width="70px" prop="batchCode" />
                <el-table-column label="备注" align="center" width="45px" prop="remark" />
              </el-table>
            </div>
            <el-row :gutter="20">
              <el-col :span="4">
                <div class="grid-content bg-purple">
                  <span class="fontsize">审核：</span>
                  <span></span>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="grid-content bg-purple">
                  <span class="fontsize">记账：</span>
                  <span></span>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="grid-content bg-purple">
                  <span class="fontsize">领料：</span>
                  <span></span>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="grid-content bg-purple">
                  <span class="fontsize">保管：</span>
                  <span></span>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="grid-content bg-purple">
                  <span class="fontsize">制单：</span>
                  <span></span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="16">
                <div class="grid-content bg-purple">
                  <span class="fontsize">{{dateFormat(date)}}</span>
                  <span></span>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="grid-content bg-purple">
                  <span class="fontsize">HK-QR-06-003</span>
                  <span class="fontsize">REV:A</span>
                  <span></span>
                </div>
              </el-col>
            </el-row>
            <div style="text-align: center;font-size: 12px;">
              <span style="margin-right: 20px;">第一联(白)：仓库</span>
              <span>第二联(红)：财务</span>
              <span style="margin-left: 20px;">第三联(蓝)：需求部门</span>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { listIssuedetail, printList } from "@/api/mes/wm/issueDetail";
export default {
  data() {
    return {
      date: new Date(),
      openDetail: false,
      title: "查看打印详情",
      // 表单参数
      form: {},
      loading: false,
      ticketData: [],
      printContent: {
        id: "printMe", // 打印的区域
        preview: false, // 预览工具是否启用
        previewTitle: "打印预览", // 预览页面的标题
        popTitle: "", // 打印页面的页眉
        extraCss:
          "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
        previewBeforeOpenCallback() {
          console.log("正在加载预览窗口");
        },
        previewOpenCallback() {
          console.log("已经加载完预览窗口");
        },
        beforeOpenCallback(vue) {
          vue.printLoading = true;
          console.log("打开之前");
        },
        openCallback(vue) {
          vue.printLoading = false;
          console.log("执行了打印");
        },
        closeCallback() {
          console.log("关闭了打印工具");
        },
        clickMounted(vue) {
          console.log("点击了打印按钮");
          // vue.printContent.popTitle = vue.tableHead; // 动态设置页眉
        }
      }
    };
  },
  dicts: ["mes_workorder_status"],
  methods: {
    //初始化函数
    init(row) {
      console.log(row, "子组件的row");
      this.ticketData = [];
      this.form = row;
      //调接口需要的id
      this.workorderId = row.workorderId;
      this.openDetail = true;
      this.getList(row);
    },
    getList(row) {
      this.loading = true;
      console.log(row, "====row=======");
      printList({ issueId: row.issueId }).then(res => {
        if (res.code == 200) {
          this.loading = false;
          //   this.print();
          this.ticketData = this.tableData(res.data, 7);
          console.log(list1, "===============list1===============");
        }
      });
    },
    // 取消按钮
    cancel() {
      this.openDetail = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        workorderId: null,
        workorderCode: null,
        workorderName: null,
        orderSource: null,
        sourceCode: null,
        productId: null,
        productCode: null,
        productName: null,
        productSpc: null,
        unitOfMeasure: null,
        quantity: null,
        quantityProduced: null,
        quantityChanged: null,
        quantityScheduled: null,
        clientId: null,
        clientCode: null,
        clientName: null,
        requestDate: null,
        parentId: null,
        status: 0,
        remark: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        orderType: null,
        fPlanStartDate: null,
        fPlanFinishDate: null
      };
      this.autoGenFlag = false;
      this.resetForm("form");
    },
    // 行合并
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        const _row = this.spanArr[rowIndex]; // 合并行数
        const _col = this.spanArr[rowIndex] > 0 ? 1 : 0; // 合并的列数
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
    // 按照类型合并
    getSpanArr(data) {
      this.spanArr = []; // tip: 后台获取完成数据后，一定要重置spanArr=[],避免出现合并混乱！！！！！
      if (data.length > 0) {
        for (let i = 0; i < data.length; i++) {
          // 当为第一行时
          if (i === 0) {
            this.spanArr.push(1);
            this.pos = 0;
          } else {
            // 判断当前值是否与上一行的【名称】相等，相等则进行合并
            if (data[i].processName === data[i - 1].processName) {
              this.spanArr[this.pos] += 1; // 合并单元格：合并的行数 +1
              this.spanArr.push(0); // 0代表单元格是不需要显示, 已经被合并的单元格
            } else {
              this.spanArr.push(1); // 1代表当前这行的数据需要被显示
              this.pos = i;
            }
          }
        }
      }
    },
    dateFormat(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    }
  }
};
</script>
  <style rel="stylesheet/scss" lang="scss" scoped>
.app-container ::v-deep .el-drawer__header {
  padding-top: 10px !important;
  padding-bottom: 5px !important;
  margin-bottom: 10px !important;
}
.H3 {
  text-align: center;
  font-weight: 700;
}
.bg-purple {
  display: flex;
  align-items: center;
  span:nth-child(1) {
    display: inline-block;
    // width: 100px;
    margin-right: 10px;
    white-space: nowrap;
    line-height: 20px;
    text-indent: 2em;
  }
}
.titleDiv {
  font-weight: 700 !important;
  font-size: 20px;
}
.printDiv {
  border: 1px solid #333;
}
.printDiv ::v-deep .el-table--border .el-table__cell {
  border-color: #333 !important;
}
.printDiv ::v-deep .el-table .cell {
  padding: 0 1px 0 2px !important;
}
.printDiv ::v-deep .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border-bottom: 1px solid #000;
}
.printDiv ::v-deep .el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th {
  background-color: #fff;
}
// .printDiv ::v-deep .el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell{
//     border-color: #333 !important;
// }
.exporttable {
  border-top: solid 1px #333;
  border-right: none;
  border-left: none;
}
.fontsize {
  font-size: 12px;
}
</style>
